<template>
  <div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsCount" />
      <van-goods-action-icon
        :icon="isAdd ? 'star' : 'star-o'"
        :text="isAdd ? '已收藏' : '未收藏'"
        color="#ff5000"
        @click="Shouc"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click.native="addGoodsCar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 弹框 -->
    <van-sku
      v-model="isShow"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>
<script>
import { SC, allData, addCart } from "@/api/classification.js";
import EventBus from "@/EventBus";
export default {
  name: "FooterShopCar",
  data() {
    return {
      goodsObj: null, //商品信息
      goodsData: {},
      isShow: false,
      goodsId: 100,
      quota: 0,
      quotaUsed: 2,
      isAdd: false,
      goodsCount: 0,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "10",
                name: "红色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg",
              },
              {
                id: "10",
                name: "蓝色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "5.00", // 默认价格（单位元）=============================
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "", // 可选值，附加描述文案
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img01.yzcdn.cn/1.jpg",
      },
      messageConfig: {
        // 数据结构见下方文档
      },
    };
  },
  props: {
    getId: {
      type: Number,
    },
    DescId: {
      type: [Number, String],
    },
  },
  created() {
    this.allDataHandler();
    this.isAdd = this.$parent.$parent.parentId == 1;
    console.log(this.$parent.$parent.parentId);
  },
  beforeMount() {
    EventBus.$on("send", (obj) => {
      this.goodsObj = obj;
    });
    // console.log("beforeMount");
  },
  methods: {
    onBuyClicked() {
      console.log("onBuyClicked");
    },
    async onAddCartClicked() {
      try {
        const res = await addCart({
          goodsId: this.DescId || this.getId,
          number: 3,
          productId: this.goodsId,
        });
        console.log(res);
        this.goodsData = res;
      } catch (err) {
        console.log(err.message);
      }
    },
    async Shouc() {
      let id;
      try {
        id = location.href.split("?")[1].split("=")[1];
      } catch (err) {
        console.log(err.message);
        id = this.getId;
      }

      this.$emit("goodsId", id);
      const res = await SC({
        valueId: id * 1,
        typeId: 0,
      });
      if (res.data.data.type == "add") {
        this.isAdd = !this.isAdd;
      } else {
        this.isAdd = !this.isAdd;
      }
    },
    async allDataHandler() {
      const {
        data: {
          data: { cartTotal },
        },
      } = await allData();
      this.goodsCount = cartTotal.goodsCount;
    },
    addGoodsCar() {
      if (this.isShow) {
        console.log("OK");
      } else {
        console.log("NO");
      }
      this.isShow = true;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-goods-action {
  z-index: 1000 !important;
}
</style>
